<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>后台管理系统-首页</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <link rel="stylesheet" href="assets/nprogress/nprogress.css"/>
    <link rel="stylesheet" href="css/admin.css"/>
</head>
<body>
<!--侧边栏-->
<aside class="ad_aside">
    <!--商标-->
    <div class="brand"><a href="index.html">Mall</a></div>
    <!--用户-->
    <div class="user">
        <img src="images/default.png" alt=""/>
        <span>超级管理员</span>
    </div>
    <!--菜单-->
    <div class="menu">
        <ul>
            <li><a href="user.html"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
            <li>
                <a href="javascript:;"><span class="glyphicon glyphicon-list"></span> 分类管理</a>
                <div class="child" style="display: none">
                    <a href="category.html">一级分类</a>
                    <a href="brand.html">二级分类</a>
                </div>
            </li>
            <li><a href="product.html"><span class="glyphicon glyphicon-tags"></span> 商品管理</a></li>
        </ul>
    </div>
</aside>
<!--内容-->
<section class="ad_section">
    <!--顶部导航-->
    <nav class="ad_nav">
        <a data-menu href="javascript:;"><span class="glyphicon glyphicon-align-justify"></span></a>
        <a data-logout href="javascript:;"><span class="glyphicon glyphicon-log-out"></span></a>
    </nav>
    <div class="container-fluid">
        <!--路径导航-->
        <ol class="breadcrumb">
            <li><a href="#">管理系统</a></li>
            <li class="active">首页</li>
        </ol>
        <div class="ad_content">
            <div class="picTable"></div>
            <div class="picTable"></div>
        </div>
    </div>
</section>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<script src="assets/nprogress/nprogress.js"></script>
<script src="assets/echarts/echarts.min.js"></script>
<script src="js/admin.js"></script>
<script>
    $(function(){
        /*1.注册人数  数据可视化*/
        /*1.1准容器渲染图标*/
        /*1.2准备数据 */
        /*1.3引入核心echarts文件*/
        /*1.4获取dom容器*/
        var firstDom = document.querySelector('.picTable:first-child');
        /*1.5初始化dom容器*/
        var firstCarts = echarts.init(firstDom);
        /*1.6进行配置和导入数据*/
        var option = {
            /*图标的标题*/
            title: {
                text: '2021年注册人数'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: ["1月","2月","3月","4月","5月","6月"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [1000, 2000, 500, 1400, 1200, 1800]
            }]
        };
        /*1.7 渲染图标*/
        firstCarts.setOption(option);

        /*2.品牌销量  数据可视化*/
        var secondDom = document.querySelector('.picTable:last-child');
        var secondCarts = echarts.init(secondDom);
        var secondOption = {
            title : {
                text: '热门品牌销售',
                subtext: '2021年6月',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['耐克','阿迪','新百伦','安踏','李宁']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'耐克'},
                        {value:310, name:'阿迪'},
                        {value:234, name:'百伦'},
                        {value:135, name:'安踏'},
                        {value:50, name:'李宁'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        secondCarts.setOption(secondOption);
    })
</script>
</body>
</html>